<script lang="ts">
	import { formatDate } from '$utils/date';

	export let position: 'start' | 'end' | 'middle' = 'middle';
	export let text =
		'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut facere omnis libero excepturi ullam itaque? Aliquid officiis, sunt illo, in incidunt et aspernatur amet voluptate voluptatum at labore, enim odio.';
	export let date = '2023-01-01 00:00:00';
</script>

<div class="w-full relative pb-20px pl-28px">
	<div class="flex flex-row justify-between items-center">
		<p class="address-info text-left color-gray-7 font-size-16px m-0">{text}</p>
		<div class="color-gray-5 font-size-15px line-height-32px">{date}</div>
	</div>
	{#if position !== 'end'}
		<div
			class="line absolute z-2 top-20px left-10px w-1px h-100%"
			style="background-color: var(--border-color)"
		></div>
	{/if}
	{#if position === 'start'}
		<div
			class="dot absolute z-3 top-0 left-0 w-20px h-20px rounded-full border-2 border-solid bg-white"
			style="border-color: var(--mdc-theme-primary)"
		></div>
	{:else}
		<div
			class="dot absolute z-3 top-0 left-0 w-20px h-20px rounded-full"
			style="background-color: var(--mdc-theme-primary)"
		></div>
	{/if}
</div>

<style lang="scss">
	// .dot {
	//   &::before {
	//     content: '';
	//     position: absolute;
	//     top: 100%;
	//     left: 50%;
	//     transform: translateX(-50%);
	//     width: 1px;
	//     height: 100%;
	//     background-color: #000000;
	//   }
	// }
</style>
